// 轮播图初始化
var mySwiper = new Swiper('.swiper', {
  direction: 'horizontal', // 水平/垂直切换选项
  loop: true, // 循环模式选项
  speed: 20,
  autoplay: true,
  // 如果需要分页器


  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },

})

// API
// 需求：
// 鼠标移入li时切换图片
// 鼠标移出时切换回默认图片
// 1.首先获取到页面上的所有Li
// 2.给li添加鼠标移入事件
// 3.鼠标移入到某个li上时，需要将其他的Li设置成默图片，然后切换需要的图片
let li = document.querySelectorAll('.list li')

let oldImgSrc;
// 遍历li 添加事件
li.forEach(function (v, i) {
  // 添加鼠标移入
  v.addEventListener("mouseover", function () {
    // console.log(this.firstElementChild.src);
    // 需要截取当前img的路径
    oldImgSrc = this.firstElementChild.src;
    // 找到路径中最后一个 / 的下标
    let index = oldImgSrc.lastIndexOf("/");
    // 截取字符串
    let subS = oldImgSrc.substring(index + 1);
    // console.log(subS);
    // 切割字符串
    let imgName = subS.split(".");
    // 新的img的路径名称
    let newImgSrc = "./img/" + imgName[0] + "-c." + imgName[1];
    // 修改img的src值，将新图片的路径复制到img上
    this.firstElementChild.src = newImgSrc;
  });
  // 鼠标移出事件
  v.addEventListener("mouseout", function () {
    this.firstElementChild.src = oldImgSrc;
  });
})



// 独角兽
let div = document.querySelectorAll(".header-img");
console.log(div);
let index = 0;
let stop;
function autoPlays() {
  stop = setInterval(function () {
    // 遍历
    div.forEach(function (v) {
      console.log(v);
      v.style.opacity = 0;
      v.style.zIndex = 1;
    });
    div[index].style.zIndex = 99;
    div[index].style.opacity = 1;
    index++;
    if (index >= div.length) {
      index = 0;
    }

  }, 2000)
}
autoPlays()
// 鼠标移入暂停
div.forEach(function (v) {
  v.addEventListener("mouseover", function () {
    clearInterval(stop)
  })
  v.addEventListener("mouseout", function () {
    autoPlays()
  })
})



// 返回顶部
let tobacktotop = document.querySelector(".backtotop")

tobacktotop.addEventListener("click", function () {
  let y = window.scrollY;
  let backtotopTime = setInterval(function () {
    y = y - 200;
    window.scrollTo(0, y);
    if (y <= 0) {
      clearInterval(backtotopTime)
    }
  }, 15)
})

// 判断滚动条隐藏
window.onscroll = function () {
  if (scrollY > 1000) {
    tobacktotop.style.display = "block"
  } else {
    tobacktotop.style.display = "none"
  }
}